<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息主页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.6.3/lib/theme-chalk/index.css">
</head>
<body>
<div id="app1" >
    <el-button plain>添加信息</el-button>
</div>
<div id="app" >
    <template>
        <el-table :data="projectData" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="id" width="180">
            </el-table-column>
            <el-table-column prop="itemName" label="项目名称" width="180">
            </el-table-column>
            <el-table-column prop="itemMoney" label="项目金额">
            </el-table-column>
            <el-table-column prop="itemRemark" label="项目备注">
            </el-table-column>
            <el-table-column prop="itemProgr" label="项目注意事项">
            </el-table-column>
            <el-table-column prop="itemPayAttention" label="项目负责人员">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button @click="handleAduit(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

    var Main = {
        created: function () {
            this.queryOrderList();
        },data() {
            return {
                projectData: [],
            };
        },
        methods: {
            //显示列表信息
            queryOrderList() {
                var _self = this
                $.ajax({
                    url:'/findAll/list',
                    async:false,
                    type:'post',
                    dataType:"json",
                    success:function(ret){
                        _self.projectData=ret;
                        console.log(_self.projectData);
                    },
                    error:function(){
                        alert("出现错误");
                    }
                })
            },
            //编辑
            handleAduit(row){
          /*  $("#detail").css("display","block");
                var index = layer.open({
                    type: 2,
                    title: '编辑/修改',
                    shadeClose: true,
                    shade: 0.3,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['893px', '600px'],*/
                    /*content: '/findAll/update?id=' + row.id*/
                   // this.$http.post('/findAll/update',{'id':row.id}).then((response) => {
                   //
                   // }

                window.location.href="/findAll/update?id="+row.id
0            },

            //删除
            handleClick(row){
                this.$confirm('确认删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('/findAll/delecItem',{'id':row.id}).then((response) => {
                        var ret = response.body;
                if (ret.code == '0') {
                    this.$message({
                        message: ret.message,
                        type: 'success'
                    });
                    this.queryOrderList();
                }else {
                    this.$message.error(ret.message);
                }
            }, (response) => {
                    this.popuoMessage(response.body.message,'error')
                });
            }).catch(() => {

                });
            }
        },

    }
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app');
    new Ctor().$mount('#app1');
</script>
</html>